/**
 * 消息提示组件
 * 提供全局的消息提示功能，支持多种类型和位置
 */

let messageId = 0 // 消息ID计数器
let messageQueue = [] // 消息队列

// 默认配置
const defaultOptions = {
  type: 'info', // 消息类型：info, success, warning, error
  message: '', // 消息内容
  duration: 3000, // 显示时长（毫秒）
  showClose: false, // 是否显示关闭按钮
  placement: 'top', // 显示位置：top, center, bottom
  onClose: null, // 关闭回调
  customClass: '', // 自定义类名
  appendTo: document.body, // 挂载容器
}

// 创建消息元素
function createMessageElement(config, styles) {
  const messageEl = document.createElement('div')
  messageEl.className = `${styles['xy-message']} ${styles['xy-message-hide']} ${
    styles['xy-message-' + config.type]
  } ${styles['xy-message-' + config.placement]}`

  if (config.customClass) {
    messageEl.classList.add(config.customClass)
  }

  // 创建消息内容容器
  const contentWrapper = document.createElement('div')
  contentWrapper.className = styles['xy-message-content']

  // 创建图标
  const iconEl = document.createElement('span')
  iconEl.className = `${styles['xy-message-icon']} ${
    styles['xy-message-icon-' + config.type]
  }`
  contentWrapper.appendChild(iconEl)

  // 创建文本内容
  const textEl = document.createElement('span')
  textEl.className = styles['xy-message-text']
  textEl.innerHTML = config.message
  contentWrapper.appendChild(textEl)

  messageEl.appendChild(contentWrapper)

  // 创建关闭按钮
  if (config.showClose) {
    const closeBtn = document.createElement('span')
    closeBtn.className = styles['xy-message-close']
    closeBtn.innerHTML = '×'
    closeBtn.onclick = () => closeMessage(messageEl, config)
    messageEl.appendChild(closeBtn)
  }

  return messageEl
}

// 关闭消息
function closeMessage(messageEl, config) {
  if (!messageEl || !messageEl.parentNode) return

  // 获取样式类名
  const styles = messageEl.classList.contains('xy-message')
    ? {
        'xy-message-show': 'xy-message-show',
        'xy-message-hide': 'xy-message-hide',
      }
    : {
        'xy-message-show': 'xy-message-show',
        'xy-message-hide': 'xy-message-hide',
      }

  // 隐藏动画
  messageEl.classList.remove(styles['xy-message-show'])
  messageEl.classList.add(styles['xy-message-hide'])

  // 动画结束后移除元素
  setTimeout(() => {
    if (messageEl.parentNode) {
      messageEl.parentNode.removeChild(messageEl)
    }

    // 从队列中移除
    messageQueue = messageQueue.filter(item => item.element !== messageEl)

    // 执行关闭回调
    if (typeof config.onClose === 'function') {
      config.onClose()
    }
  }, 300)
}

// 主消息函数
async function xyMessage(options) {
  const config = { ...defaultOptions, ...options }

  // 动态导入样式
  const styles = await import('./xyMessage.module.css')

  // 创建消息元素
  const messageEl = createMessageElement(config, styles)

  // 生成唯一ID
  messageId++
  messageEl.id = `xy-message-${messageId}`

  // 添加到容器
  config.appendTo.appendChild(messageEl)

  // 添加到队列
  messageQueue.push({
    element: messageEl,
    config: config,
  })

  // 显示动画
  setTimeout(() => {
    messageEl.classList.remove(styles['xy-message-hide'])
    messageEl.classList.add(styles['xy-message-show'])
  }, 10)

  // 自动关闭
  if (config.duration > 0) {
    setTimeout(() => {
      closeMessage(messageEl, config)
    }, config.duration)
  }

  // 返回关闭方法
  return {
    close: () => closeMessage(messageEl, config),
  }
}

// 快捷方法
xyMessage.info = (message, options = {}) => {
  return xyMessage({ ...options, message, type: 'info' })
}

xyMessage.success = (message, options = {}) => {
  return xyMessage({ ...options, message, type: 'success' })
}

xyMessage.warning = (message, options = {}) => {
  return xyMessage({ ...options, message, type: 'warning' })
}

xyMessage.error = (message, options = {}) => {
  return xyMessage({ ...options, message, type: 'error' })
}

// 关闭所有消息
xyMessage.closeAll = () => {
  messageQueue.forEach(item => {
    closeMessage(item.element, item.config)
  })
  messageQueue = []
}

export default xyMessage
